<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {
            color: #f00;
            font-size: 20px;
            text-decoration: underline;
        }

        .bg {
            background-color: gold;
        }
    </style>
</head>
<body>
<div id="app">

    <p v-if="isStatus" :class="{'p1': true, 'bg': true}">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut deleniti
        fugiat maiores maxime nihil nisi, obcaecati omnis quis sit? Ab blanditiis delectus minima odit pariatur rem
        repellat repudiandae unde.</p>
    <p v-else>if为假的时候显示，为真的时候隐藏</p>

</div>
</body>
<script src="./lib/vue.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el: '#app',

        data: {
            title: 'hi vuejs!',
            info: '<h2> 我今天学习了 vuejs</h2>',
            imgLogoUrl: 'https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png',
            p1ClassNameArr: ['p1', 'bg'],
            styleStrObj: {'font-size': '40px', 'color': '#f00'},
            styleObj: {'p1': true, 'bg': true},
            isStatus: true,


        }
    });


</script>

</html>
